<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="100px" :rules="nodeModalRules"
           size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据源" prop="table">
          <el-select v-model="nodeModalForm.table" @change="handleTableChange" clearable filterable>
            <el-option v-for="item in tableList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="行数" prop="limit">
          <el-input-number v-model="nodeModalForm.limit" :min="0" class="w_100"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-table :data="nodeModalForm.fields" border style="width: 100%" height="400" ref="fieldDataRef"
              v-loading="tableLoading">
      <el-table-column type="selection" v-if="node.type === 'select'" width="50" />
      <el-table-column align="center" type="index" width="50" label="序号" />
      <el-table-column align="center" property="COLUMN_NAME" label="字段名称" />
      <el-table-column align="center" property="DATA_TYPE" label="字段类型" />
      <el-table-column align="center" property="COLUMN_COMMENT" label="字段注释" />
      <el-table-column align="center" width="150" label="别名" property="alias">
        <template #default="scope">
          <el-input v-model.trim="scope.row.alias" clearable></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { getETLTableFields, mysqlTables, } from "../../../../../service/data_etl";
import { useEtlStore } from "../../../../../store/flowEtl"

export default defineComponent({
  name: "node-config-input",
  props: {
    node: Object,
  },
  components: {},
  setup (props) {
    const etlStore = useEtlStore();
    const nodeList = computed(() => etlStore.nodeList);
    const data_etl_id = computed(() => etlStore.data_etl_id);
    const nodeConfigClose = inject("nodeConfigClose");
    const fieldDataRef = ref();
    const nodeModalForm = ref({
      nodeName: "",
      table: "",
      limit: 1000,
      originFields: [],
      fields: []
    });
    const nodeModal = ref();
    const tableLoading = ref(false);
    const tableList = ref([]);
    const getTable = () => {
      mysqlTables({
        data_etl_id: data_etl_id.value
      }).then(res => {
        tableList.value = res.data;
      });
    };
    const handleTableChange = () => {
      tableLoading.value = true;
      nodeModalForm.value.fields = [];
      getETLTableFields({
        data_etl_id: data_etl_id.value,
        table: nodeModalForm.value.table,
      }).then((res) => {
        nodeModalForm.value.originFields = res.data.rows;
        nodeModalForm.value.fields = res.data.rows;
        tableLoading.value = false;
      }).catch(() => {
        tableLoading.value = false;
      });
    };
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入数据源名称",
        trigger: "blur",
      },
      table: {
        required: true,
        message: "请选择数据表",
        trigger: "change",
      }
    });
    const handleConfigCancel = () => {
      nodeConfigClose();
    };
    const nodeConfigUpdate = (node) => {
      let nodes = [...nodeList.value].map(item => {
        if (item.id === node.id) {
          item.status = true;
          item.nodeName = node.nodeName;
          item.originFields = node.originFields;
          item.config.table = node.table;
          item.config.limit = node.limit;
          item.config.fields = node.fields;
        }
        return item;
      });
      etlStore.setNodeList(nodes);
      nodeConfigClose();
    };
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value);
        } else {
          return false;
        }
      });
    };
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        originFields: [],
        table: "",
        limit: 0,
        fields: []
      };
    };
    onMounted(() => {
      resetForm();
      getTable();
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
        table: props.node.config.table,
        limit: props.node.config.limit,
        originFields: props.node.originFields,
        fields: props.node.config.fields,
      };
    });
    return {
      nodeList,
      tableLoading,
      nodeModalForm,
      tableList,
      nodeModalRules,
      nodeModal,
      fieldDataRef,
      getTable,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      handleTableChange,
      nodeConfigUpdate,
      nodeConfigClose,
    };
  },
});
</script>

<style scoped>
.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>